import React, { useState } from 'react';
import {
    Button,
    Form,
    Input,
    InputNumber,
    Checkbox,
    Row,
    Radio,
    Modal,
    notification
} from 'antd';

import ModalAddFrom2 from './ModalAddFrom2';

const ModalForm = ({ open, onCancel, confirmLoading }) => {
    const [form] = Form.useForm();
    const onOk = () => {
        form.submit();
        // form.resetFields();
    };
    return (
        <Modal title="添加1" open={open} onOk={onOk} onCancel={onCancel} confirmLoading={confirmLoading}>
            <Form form={form} name="userForm">

                <Form.Item name="name" label="名称" rules={[{ required: true, },]} >
                    <Input />
                </Form.Item>

                <Form.Item name="checkbox-group" label="多选">
                    <Checkbox.Group>
                        <Row>
                            <Checkbox value="上网123" style={{ lineHeight: '32px' }}> 上网 </Checkbox>
                            <Checkbox value="打游戏" style={{ lineHeight: '32px' }} disabled>  打游戏 </Checkbox>
                            <Checkbox value="购物" style={{ lineHeight: '32px' }}> 购物 </Checkbox>
                            <Checkbox value="运动" style={{ lineHeight: '32px' }}> 运动 </Checkbox>
                        </Row>
                    </Checkbox.Group>
                </Form.Item>

                <Form.Item name="radio-group" label="学历">
                    <Radio.Group>
                        <Radio value="专科">专科</Radio>
                        <Radio value="本科">本科</Radio>
                        <Radio value="硕士">硕士</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item name="age" label="年龄" rules={[{ required: true, },]} >
                    <InputNumber />
                </Form.Item>

            </Form>
        </Modal>
    );
};

const ModalAddFrom = () => {
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const showUserModal = () => {
        setOpen(true);
    };
    const hideUserModal = () => {
        setOpen(false);
    };
    return (
        <>
            <h3>Hooks:使用Form.Provider，表单间联动功能获取数据</h3>
            <Form.Provider
                onFormFinish={(name, { values, forms }) => {
                    console.log(name, 123)
                    if (name === 'userForm') {
                        setConfirmLoading(true);
                        console.log('mydata111：', values, forms)
                        notification.info({
                            message: '信息',
                            description: JSON.stringify(values) + ' <p> 控制台查看详情</p>',
                            topRight: 'topRight',
                        });
                        //确定按钮加载效果
                        setTimeout(() => {
                            setConfirmLoading(false);
                            setOpen(false);
                        }, 3000);
                    }
                }}
            >
                <Form name="basicForm" >
                    <Button htmlType="button" onClick={showUserModal} > Add demo  </Button>
                </Form>

                <ModalForm open={open} onCancel={hideUserModal} confirmLoading={confirmLoading} />
            </Form.Provider>

            <hr />
            <ModalAddFrom2></ModalAddFrom2>
        </>
    );
};
export default ModalAddFrom;